<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue-v2.5.17.js"></script>

</head>
<body>
<!--创建了一块空间，包含vue元素-->
<div id="app">
    <!--插值表达式-->
    {{message}}<br/>
    数组中的元素：{{arr[1]}}<br/>
    整数：{{i+1}}<br/>
    对象：{{student}}<br/>
    方法：{{sayHello()}}

    <p v-if="flag">
        这是一个段落
    </p>
    <p v-else>
        flag为FALSE
    </p>
    <!--v-if：控制元素是否加载
    v-show：无论真假都会加载元素 以display控制元素是否显示-->
    <p v-if="i<0">
        i是个负数
    </p>
    <p v-else-if="i=0">
        i等于0
    </p>
    <p v-else>
        i是个正数
    </p>

    <p v-show="flag">
        v-show
    </p>
</div>
</body>
<script>
    new Vue({
        el:"#app",   //指定vue管理的元素
        data:{
          //定义数据
          message:"helloworld",
            arr:[1,2,3,4,5,6],
            i:-1,
            student:{
              id:1,
                username:"文亮",
                password:"1"
            },
            flag:true
        },
        //定义方法
        methods:{
            sayHello(){
                return "HelloWorld"
            }
        }
    });
</script>
</html>